<template>
	<el-dialog title="详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
		<el-form ref="form" :model="formlist" label-width="80px">
			<el-row>

				<el-col :span="24">
					<el-form-item label="数据库源：" label-width="120px">
						<el-select v-model="formlist.sourceId" disabled>
							<el-option v-for="item in rDsList" :key="item.id" :label="item.sourceName" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="写入源：" label-width="120px">
						<el-select v-model="formlist.targetId" disabled>
							<el-option v-for="item in rDsList" :key="item.id" :label="item.sourceName" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="任务目录：" prop="directoryId" label-width="120px">
						<el-input v-model="formlist.directoryId" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="cron表达式：" label-width="120px">
						<el-input v-model="formlist.cronExpression" disabled></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="24" v-if="formlist.time.length > 0">
					<el-form-item label="时间段:" label-width="120px">
						<el-date-picker disabled v-model="formlist.time" type="datetimerange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="执行器：" label-width="120px">
						<el-input v-model="formlist.appName" disabled></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="执行器类：" label-width="120px">
						<el-input v-model="formlist.executeclass" disabled></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="执行器类方法：" label-width="120px">
						<el-input v-model="formlist.methodName" disabled></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="数据源表名：" label-width="120px">
						<el-select v-model="formlist.sourceTableId" disabled>
							<el-option v-for="item in this.data" :key="item.id" :label="item.label" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="写入源表名：" label-width="120px">
						<el-select v-model="formlist.targetTableId" disabled>
							<el-option v-for="item in this.data" :key="item.id" :label="item.label" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="任务名称：" label-width="120px">
						<el-input v-model="formlist.jobName" disabled></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="任务描述：" label-width="120px">
						<el-input v-model="formlist.description" disabled></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<div class="grid-content bg-purple-dark">
						<el-form-item label="调度类型">
							<el-radio v-for="(item, index) in dictList('scheduling_type')" disabled
								v-model="formlist.scheduleType" :key="index" :label="item.value">
								{{ item.label }}
							</el-radio>
						</el-form-item>
					</div>
				</el-col>

				<el-col :span="24">
					<div class="grid-content bg-purple-dark">
						<el-form-item label="调度等级" prop="scheduleLevel">
							<el-radio v-for="(item, index) in dictList('scheduling_level')" :key="index" disabled
								v-model="formlist.scheduleLevel" :label="item.value">
								{{ item.label }}
							</el-radio>
						</el-form-item>
					</div>
				</el-col>

			</el-row>
		</el-form>
	</el-dialog>
</template>

<script>
import { listDataSource } from '@/api/metadata/sqlconsole'
import { fetchMasterdataDirectoryList } from "@/api/masterdata/masterdataDirectory";
import { getTableList } from '@/api/masterdata/masterdataTable'
export default {
	props: ['details'],
	data() {
		return {
			treeList: [],
			upResName: '',
			detailsobj: this.details,
			dialogVisible: true,
			rDsList: [],
			rTbList: [],
			tableData: [],
			data: [],
			treeProps: {
				children: 'children',
				label: 'label',
				checkStrictly: true
			},
			treeQuery: {
				page: 1,
				limit: 25,
				ancestralId: 10
			},
			formlist: {
				directoryId: "",
				time: [],
				name: '',
				jobName: '',
				sourceId: '',
				targetId: '',
				appName: '',
				targetTableId: '',
				sourceTableId: '',
				description: '',
				scheduleType: '',
				scheduleLevel: "",
				cronExpression: '',
				methodName: "",
				executeclass: ""
			},
		}
	},
	mounted() {
		this.getJdbcDs()
		this.getTreeList()
		this.formlist.sourceId = this.detailsobj.sourceDatasourceId
		this.formlist.targetId = this.detailsobj.targetDatasourceId
		this.formlist.appName = this.detailsobj.appName
		this.formlist.jobName = this.detailsobj.jobName
		this.formlist.directoryId = this.detailsobj.directoryId
		this.formlist.cronExpression = this.detailsobj.cronExpression
		this.formlist.scheduleType = this.detailsobj.jobConfig.scheduleType
		this.formlist.scheduleLevel = this.detailsobj.jobConfig.scheduleLevel
		this.formlist.description = this.detailsobj.description
		this.formlist.methodName = this.detailsobj.methodName
		this.formlist.executeclass = this.detailsobj.executeClass
		this.formlist.sourceTableId = this.detailsobj.dataExtractionDetailList[0].sourceTableId
		this.formlist.targetTableId = this.detailsobj.dataExtractionDetailList[0].targetTableId
		if (this.detailsobj.extractionStartTime) {
			this.formlist.time = [this.detailsobj.extractionStartTime, this.detailsobj.extractionEndTime]
		}

	},
	methods: {
		diguiF(list, item) {
			let name = ""
			list.map((v, i) => {
				if (v.id == item) {
					name = v.name
				} else {
					if (v.children && v.children.length) {
						name = this.diguiF(v.children, item)
					}
				}
			})
			return name
		},
		//节点点击事件
		handleNodeClick(data) {
			this.upResName = data.name
		},
		getTreeList() {
			fetchMasterdataDirectoryList(this.treeQuery).then((response) => {
				if (response.data.code == 200) {
					this.treeList = response.data.data
					this.formlist.directoryId = this.diguiF(this.treeList, this.formlist.directoryId);;
				} else {
					this.$message.error(response.data.msg)
				}
			})
		},
		getJdbcDs() {
			getTableList({ sourceId: this.formlist.sourceId }).then((res) => {
				 
				if (res.data.code == 200) {
					this.rTbList = res.data.data
					this.tableData = []
					this.data = []
					for (let i = 0; i < this.rTbList.length; i++) {
						this.tableData.push({
							id: this.rTbList[i].id,
							tableName: this.rTbList[i].tableName + this.rTbList[i].tableComment,
							tableComment: this.rTbList[i].tableComment,
							table: this.rTbList[i].tableName,
						})
						this.data.push({
							key: this.rTbList[i].id,
							label: this.rTbList[i].tableName,
							tableName: this.rTbList[i].tableName + this.rTbList[i].tableComment,
							tableComment: this.rTbList[i].tableComment,
							table: this.rTbList[i].tableName,
							id: this.rTbList[i].id,
							total: this.rTbList[i].total,
						})
					}
				}
			})
			listDataSource().then((response) => {
				if (response.data.code == 200) {
					response.data.data.map((v, i) => {
						this.rDsList.push(v)
					})
					console.log(this.rDsList)
				}
			})
		},
		handleClose() {
			this.dialogVisible = false
			this.$emit('change')
		},
	},
}
</script>

<style></style>
